<template>
  <div class="demo-carousel">
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in urlList" :key="item">
        <el-image :src="item"/>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="demo-echarts">
    <el-row class="echarts-wrap">
      <el-col :span="10">
        <div ref="echarts01Ref"
             class="test-echarts"/>
      </el-col>
      <el-col :span="10">
        <div ref="echarts02Ref"
             class="test-echarts"/>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup name="Home">
import {} from 'vue'
import {Session} from "../../utils/storage";
import useUserInfo from "@/store/module/userInfo";
import pinia from "@/store";
import {ElNotification} from "element-plus";
import echarts from '@/utils/echarts'

const echarts01Ref = ref();
const echarts02Ref = ref();
let userInfoStore = useUserInfo(pinia);
let urlList = reactive([
  // 'https://y.qq.com/music/common/upload/MUSIC_FOCUS/4519081.jpg?max_age=2592000',
  // 'http://p1.music.126.net/z3eDMpzsjwJHICXL6PEwnw==/109951168103046000.jpg?imageView&quality=89',
  'http://p1.music.126.net/XYtiHYsUVTcB2ZB5ahuauw==/109951168139542474.jpg?imageView&quality=89',
  'http://p1.music.126.net/jO9Fu-XC29hFkmmW2FazPA==/109951168103047790.jpg?imageView&quality=89',
  // 'https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&w=800',
  // 'https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg?auto=compress&cs=tinysrgb&w=800',
  // 'https://images.pexels.com/photos/884788/pexels-photo-884788.jpeg?auto=compress&cs=tinysrgb&w=800',
  'http://p1.music.126.net/O3u6hc_8UuxjYi7t1ALlSQ==/109951168103055568.jpg?imageView&quality=89',
  //'http://p1.music.126.net/8D9naH4GhglUZLkaihugzw==/109951168185845628.jpg?imageView&quality=89',
  //'http://p1.music.126.net/3URSNu8GFd4K47fjvZ51aw==/109951168185842880.jpg?imageView&quality=89',
])

const getEcharts01 = () => {
  const chartBox = echarts.init(echarts01Ref.value);
  const option = {
    title: {
      text: '基础饼图'
    },
    tooltip: {
      trigger: 'item',   // trigger 触发方式，放到图形上触发提示
      // 格式化提示内容：a 代表series系列图表名称；b 代表series数据名称 data 里面的name；c 代表series数据值 data 里面的value；d代表 当前数据/总数据的比例
      formatter: "{b} : {c} ({d}%)",
      confine: true, // 防止提示框被遮挡
    },
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 300,
            name: '蓝染·惣右介'
          },
          {
            value: 750,
            name: '山本·元柳斋'
          },
          {
            value: 234,
            name: '友哈·巴赫'
          },

        ]
      }
    ]
  };
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
}

const getEcharts02 = () => {
  // 获取组件实例
  const chartBox = echarts.init(echarts02Ref.value);
  // 设置配置项
  const option = {
    title: {
      text: '堆叠折线图'
    },
    tooltip: {
      trigger: "axis" //图表提示框显示
    },
    legend: {
      data: ['黑崎一护', '蓝染·惣右介']
    },
    grid: {
      ////网格配置，可以控制线形图，柱状图，图标大小
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true ////y轴左侧刻度显示
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ["A", "B", "C", "D", "E"],
    },
    yAxis: [
      {
        type: "value",
        axisLabel: {
          formatter: "{value}"
        }
      },
      {
        name: "数量",
        nameLocation: "start",
        type: "value",
        inverse: true
      }
    ],
    series: [
      {
        name: '黑崎一护',
        data: [10, 22, 28, 43, 49],
        type: "line",
        stack: "Total",
      },
      {
        name: '蓝染·惣右介',
        data: [5, 4, 3, 5, 10],
        type: "line",
        stack: "Total",
      },
    ],
  };
  // 复制
  chartBox.setOption(option);
  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
    chartBox.resize();
  });
}

const welcome = () => {
  let isWelCome = Session.get('isWelCome')
  if (!isWelCome) {
    let str: string
    let date = new Date();
    if (date.getHours() >= 0 && date.getHours() < 12) {
      str = "上午好"
    } else if (date.getHours() >= 12 && date.getHours() < 18) {
      str = "下午好"
    } else {
      str = "晚上好"
    }
    Session.set('isWelCome', true)
    ElNotification({
      title: '欢迎～',
      message: h('i', {style: 'color: teal'}, `${str} ${userInfoStore.userInfo.userName}`),
    })
  }
}

onMounted(() => {
  welcome()
  getEcharts01()
  getEcharts02()
})
</script>

<style scoped lang='less'>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.demo-echarts {
  .echarts-wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .test-echarts {
      min-width: 100%;
      min-height: 280px;
    }
  }
}

</style>
